<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="userState && userState.headimgurl | formatUrl"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput
					v-model="phoneData"
					type="text"
					maxlength="11"
					placeholder="手机号"
				></wInput>
				<wInput
					v-model="passData"
					type="password"
					maxlength="16"
					placeholder="密码"
					@input="onChange"
				></wInput>
				<view v-show="passIsShow && passData.length > 0 " :style="{ color: `${tipIsTrue ? '#32cd32' : '#ff0000b3'}`, padding: '0 20px', fontSize: '12px'}">
					密码为6-16位 字母数字的组合
				</view>
				<view class="row">
					<view class="nominal" :style="{color: `${remmberMe ? '#E80505': '#666666'}`, fontSize: '12px'}">
						记住密码
					</view>
					<view class="input switch">
						<switch style="transform: scale(0.5)" color="#E80505" :checked="remmberMe" @change=remmberMeChange />
					</view>
				</view>
			</view>
			<wButton 
				text="登 录"
				:rotate="isRotate" 
				@click.native="startLogin()"
			></wButton>
			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">找回密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">注册账号</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '@/components/watch-login/watch-input.vue' //input
	import wButton from '@/components/watch-login/watch-button.vue' //button
	import {getCookie, setCookie} from '@/utils/cookiesUtil.js'
	import { encryption } from '@/utils/aesEncrypt.js';
	import {
		mapState,  
		mapMutations
	} from 'vuex';
	import api from '@/common/services/api.js'; 
	import userApis from '@/common/services/user.js';
	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '',
				phoneData:'', //用户/电话
				passData:'', //密码
				remmberMe: false,
				isRotate: false, //是否加载旋转
				iv: '',
				key: '',
				tipIsTrue: false, // 提示是否显示正确
				passIsShow: false, // 密码对应的是否
			};
		},
		computed:{
			...mapState(['userState'])
		},
		components:{
			wInput,
			wButton,
		},
		filters: {
			formatUrl: function(url) {
				return url && url.indexOf('http') !== -1 ? url : 'http://106.13.76.109:8080/xsmall/sys/common/view/'+ url
			}
		},
		mounted() {
			_this= this;
		},
		onLoad() {
			api.getPassWord().then( res=> {
				this.iv = res.iv;
				this.key = res.key;
				setCookie('iv', res.iv)
				setCookie('key', res.key)
			 })
			 if (this.userState.remmberme) {
				this.remmberMe = true;
				this.passData = this.userState.password;
				this.phoneData = this.userState.mobilePhone;
				this.tipIsTrue = this.$validate.tel(this.userState.mobilePhone)
			 }
		},
		methods: {
			isLogin(){
				//判断缓存中是否登录过，直接登录
				// try {
				// 	const value = uni.getStorageSync('setUserData');
				// 	if (value) {
				// 		//有登录信息
				// 		console.log("已登录用户：",value);
				// 		_this.$store.dispatch("setUserData",value); //存入状态
				// 		uni.reLaunch({
				// 			url: '../../../pages/index',
				// 		});
				// 	}
				// } catch (e) {
				// 	// error
				// }
			},
			remmberMeChange(e) {
			  this.remmberMe = e.detail.value;
			},
			onChange(value) {
				this.passIsShow = true;
				if(this.$validate.pws(value)) {
					this.tipIsTrue = true;
				}else {
					this.tipIsTrue = false;
				}
			},
		    startLogin(){
				// //登录
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				// 
				if (!this.phoneData) {
					uni.showToast({
					    icon: 'none',
						position: 'bottom',
					    title: '手机号不能为空'
					});
					return;
				}
				if (!this.$validate.tel(this.phoneData)) {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '手机号格式错误'
				    });
				    return;
				}
		        if (this.passData === '') {
		            uni.showToast({
		                icon: 'none',
						position: 'bottom',
		                title: '密码不能为空'
		            });
		            return;
		        } else if (!this.$validate.pws(this.passData)) {
		            uni.showToast({
		                icon: 'none',
						position: 'bottom',
		                title: '密码应该为6-16位 字母数字的组合'
		            });
		            return;
		        }
				_this.isRotate=true
				// 
				api.userLogin({
					    password: encryption(this.passData, this.key, this.iv),
						remmber_me: this.remmberMe,
						username: this.phoneData,
					}).then( res=> {
					setCookie('token', res.token)
					userApis.getUserInfo().then(res => {
						_this.login({
							...res,
							remmberme: _this.remmberMe,
							password: _this.passData,
						})
						_this.isRotate=false
						uni.reLaunch({
							url: '../home/index',
						});	
					})
				 }).catch(err => {
					_this.isRotate= false
					this.passData = ''
					this.phoneData = ''
				 })
				uni.hideToast();
		    },
			...mapMutations({
				'login': 'LOGIN'
			})
		}
	}
</script>

<style>
	@import url("../../components/watch-login/css/icon.css");
	@import url("./css/main.css");
</style>
